· 읽는데 9분
블로그 게시글 목록 페이지를 만드는 방법을 소개합니다. Nuxt 3의 기능을 활용하여 blog.vue 페이지 컴포넌트와 PostList, PostCard 컴포넌트를 구현하고, i18n 설정 및 데이터를 비동기로 가져오는 퍼사드 패턴까지 다뤄보겠습니다.
읽어보기
블로그 게시글 목록 페이지를 만드는 방법을 소개합니다. Nuxt 3의 기능을 활용하여 blog.vue 페이지 컴포넌트와 PostList, PostCard 컴포넌트를 구현하고, i18n 설정 및 데이터를 비동기로 가져오는 퍼사드 패턴까지 다뤄보겠습니다.
인덱스 페이지 설계부터 Hero와 Snaps 컴포넌트 구성, Nuxt SEO 모듈을 활용한 SEO 최적화까지, 블로그 작성자 소개와 검색 엔진 친화적인 설정을 통해 완성도 높은 인덱스 페이지를 만드는 방법을 알아봅니다.
이번 시간에는 Header, Footer, Page와 같은 레이아웃 관련 공통 컴포넌트를 개발합니다. 이와 함께 언어 전환(Language Switcher), 테마 전환(Theme Switcher), 그리고 공통적으로 사용될 Button과 Link 컴포넌트를 만들어 레이아웃에 통합해 보겠습니다.
이번 글에서는 본격적으로 개발에 들어가기 전에 코드 품질 도구 설정, 스타일링 인프라 구축, 다국어 환경 구성 등 개발 환경을 준비하는 과정을 다뤄보겠습니다.
오늘날 블로그는 단순한 기록의 공간을 넘어, 자신만의 생각과 지식을 공유하고 전문성을 알릴 수 있는 중요한 플랫폼으로 자리 잡았습니다. 특히 개발자에게 블로그는 개인 브랜딩의 필수 요소로, 코드 스니펫부터 프로젝트 아카이브, 기술적 노하우를 공유하는 공간으로 활용됩니다.